<template>
	<view>
		<view class="slider-box">
			<view class="flex"></view>
			<movable-area class="sliderBar" :style="{width: (100 - minScore)+'%'}">
				<view class="gone" :style="{width: x +'px'}"></view>
				<movable-view class="slider" :disabled="jinyong" :x="x" :y="y" direction="horizontal"
					@change="onChange">
					<text>{{ score }}</text>
				</movable-view>
			</movable-area>
			<view :style="{width: (100 - maxScore) +'%'}"></view>

			<view v-if="endLeft " class="dian start" :style="'left:'+ startLeft +'px'"></view>
			<view v-if="endLeft " class="dian end" :style="'left:'+endLeft+'px'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['min', 'max', 'start', 'end', 'step', 'status', 'index', 'value', 'range', 'jinyong', 'decimal'],
		data() {
			return {

				slideBarWidth: 0,
				minScore: this.min ? this.min : 0,
				maxScore: this.max ? this.max : 100,
				x: 0,
				y: 0,
				score: this.start ? this.start : 0,

				swin: 0,

				startLeft: 0,
				endLeft: 0
			};
		},
		created() {

			let {
				windowWidth
			} = uni.getSystemInfoSync()
			this.swin = windowWidth
			if (this.value) {
				this.score = this.value

				let len = (this.score - this.end) / (this.end - this.start)
				let bi = this.swin / 750
				let wi = bi * 670
				this.x = (this.score - (this.start * 1)) / parseFloat(this.end - this.start) * wi
			}

			if (this.range) {

				console.log(this.range);

				let start = this.range[0],
					end = this.range[1];

				let len = (this.start - this.end) / (this.end - this.start)
				let bi = this.swin / 750
				let wi = bi * 670

				this.startLeft = (start - (this.start * 1)) / parseFloat(this.end - this.start) * wi

				this.endLeft = (end - (this.start * 1)) / parseFloat(this.end - this.start) * wi
			}
		},
		methods: {
			jugment() {

				return 0
			},
			onChange: function(e) {
		
				// 设置已选中的进度条颜色
				this.x = e.detail.x

				// 实现方案一
				let bi = this.swin / 750
				let wi = bi * 670
				let len = parseInt(e.detail.x / wi * 100)

				// 实现方案二
				// let len = parseInt(e.detail.x/this.slideBarWidth*100) + parseInt(this.minScore)

				let a = parseFloat((this.end - this.start) * (len / 100))
				// 
				// this.score = parseInt(a) + parseInt(this.start)

				let canshu = a + this.start
				
				if (typeof canshu == 'string'){
					
					canshu = parseFloat(canshu)
				}
				canshu = canshu.toFixed(1) + ''
				
				let xianshi = canshu
				let arr = canshu.split('.')
				if (this.decimal == 2) {
					this.score = parseInt(a) + parseInt(this.start)
					
				} else {
			
					if (arr.length == 2) {
						let weishu = arr[1]
						let shouwei = arr[0]
						if (weishu > 4) {
							weishu = 5
						} else {
							weishu = 0
						}
						this.score = shouwei + '.' + weishu
				
					} else {
						this.score = xianshi
					}
				}


				let {
					score,
					status,
					index
				} = this
				this.$emit('change', {
					status,
					score,
					index
				})
			},
			getnum(num) {

				let result = num.substring(0, s.indexOf(".") + 3);
				return result
			}
		},
	}
</script>


<style lang="scss">
	// $uni-color-primary: #F63D59;
	.dian {
		width: 10px;
		height: 10px;
		border-radius: 10px;
		background-color: #257AE5;
		position: absolute;
		top: 0;
		left: 20%;
		z-index: 2;
	}

	$uni-color-primary: rgb(236, 179, 57);

	.slider-box {
		display: flex;
		width: 100%;
		height: 20rpx;
		position: relative;
		margin-bottom: 10px;
		border-radius: 50px;

		&::before {
			content: '';
			position: absolute;
			height: 8rpx;
			border-radius: 8rpx;
			background-color: #EEEEEE;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
		}

		.flex {
			flex: 1;
			height: 8rpx;
			border-radius: 8rpx 0 0 8rpx;
			background-color: $uni-color-primary;
			margin-top: 12rpx;
			position: relative;
			z-index: 1;
		}

		.sliderBar {
			height: 100%;
			border-radius: 8rpx;
			width: 100%;
			background: #ECECEC;

			.gone {
				background-color: #ECB339;
				height: 100%;
				position: absolute;
				left: 0;
				/* height: 4px; */
				/* top: 6px; */
				max-width: 100%;
				z-index: 1;
				border-radius: 0 4px 4px 0;
				border-top-left-radius: 100rpx;
				border-bottom-left-radius: 100rpx;
			}

			.slider {
				width: 0;
				height: 100%;
				position: relative;
				z-index: 2;

				&::after {
					content: '';
					position: absolute;
					top: -10rpx;
					// border-radius: 16rpx;
					// background-color: $uni-color-primary;
					width: 20rpx;
					height: 20rpx;
					transform: translatex(-50%);


					background-color: rgb(255, 255, 255);
					border: 5px solid $uni-color-primary;
					border-radius: 50%;
				}

				text {
					position: absolute;
					// width: 60rpx;
					padding: 0 10rpx;
					color: white;
					border-radius: 14rpx;
					top: -56rpx;
					left: 50%;
					text-align: center;
					transform: translateX(-50%);
					// background-color: $uni-color-primary;
					background-color: $uni-color-primary;

					&::after {
						content: '';
						position: absolute;
						border: 6rpx solid transparent;
						border-top-color: $uni-color-primary;
						top: 99%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
</style>
